<script setup lang="ts" name="Home">
import axios from 'axios'
import { ref } from 'vue'
import { IResponse, IData } from '@/types'
import { getCategoryList } from '@/api'
import { initData } from '@/hooks'

const arr = ref<IData[]>([])
initData(getCategoryList).then((r) => (arr.value = r))
</script>

<template>
  <div class="wrap">
    <el-scrollbar>
      <ul>
        <li v-for="item in arr" :key="item.id" class="item">
          <router-link :to="`/subcategory/${item.id}`"><span></span>{{ item.name }}</router-link>
        </li>
      </ul>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="less">
.wrap {
  .item {
    background-color: rgba(45, 221, 227, 0.3);
  }
}
</style>
